<template>
  
  <div class="goods-page-bg">
    <el-breadcrumb :separator-icon="ArrowRight" style="margin-bottom: 20px; ">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item >货品类型</el-breadcrumb-item>
   
  
  </el-breadcrumb>
  <!-- 查询框 -->
    <!-- <el-card class="form-card">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="货品名称">
          <el-input
            v-model="formInline.name"
            placeholder="请输入货品名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="货品状态">
          <el-select
            v-model="formInline.status"
            placeholder="请选择货品状态"
            clearable
            style="width:150px"
          >
            <el-option label="待入库" :value="1" />
            <el-option label="已入库" :value="2" />
            <el-option label="已出库" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="供应商">
          <el-select
            v-model="formInline.customid"
            placeholder="请选择供应商"
            clearable
            style="width: 150px"
          >
           <el-option
                  v-for="item in goodsVendorList"
                  :value="item.wVendorcoding"  :label="item.wVendorname"
                />
          </el-select>
        </el-form-item>
        <el-form-item label="供货日期">
          <el-date-picker
            v-model="formInline.createtime"
            type="date"
            placeholder="选择供货日期"
            clearable
          />
        </el-form-item>
        <el-form-item label="货品生产日期">
          <el-date-picker
            v-model="formInline.productime"
            type="date"
            placeholder="选择生产日期"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getdata">
            <i class="el-icon-search"></i> 查询
          </el-button>
          <el-button type="success" @click="Add">
            <i class="el-icon-plus"></i> 新增货品
          </el-button>
          <el-button type="warning" @click="EditSelected">
            <i class="el-icon-edit"></i> 编辑
          </el-button>
          <el-button type="info" @click="">
            <i class="el-icon-download"></i> 导出货品信息
          </el-button>
          <el-button type="danger" @click="DeleteSelected">
            <i class="el-icon-delete"></i> 删除
          </el-button>
        </el-form-item>
      </el-form>
    </el-card> -->
    <el-card class="table-card">
      <el-table
        :data="tableData"
        style="width: 100%"
        ref="goodsTableRef"
      >
        <el-table-column type="selection" width="55" />
         <el-table-column fixed prop="goodstypecoding" label="货品类型编码" width="180" >
    </el-table-column>
        <el-table-column label="货品类型">
          <el-table-column prop="wGoodstypename" label="货品类型名称" width="180" />
          <el-table-column prop="wGoodstypestuts" label="货品类型是否热门" width="160">
            <template v-slot="scop">
              <el-tag v-if="scop.row.wGoodstypestuts == 1">是</el-tag>
               <el-tag v-else>否</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="wGoodstyperemark"
            label="货品类型介绍"
            width="300"
          />
          
        </el-table-column>
      </el-table>
        <!-- 分页
 <table>
    <tr>
        <td>
            <div class="demo-pagination-block">
                <el-pagination
                v-model:current-page="Page.pageindex"
                v-model:page-size="Page.pagesize"
                :page-sizes="[2, 3, 5, 10]"
                :size="Page.pagesize"
                :disabled="disabled"
                :background="background"
                layout="slot, sizes"
                :total="Page.totalcount"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                >
                一共{{ Page.totalcount }}条数据，当前第{{ Page.pageindex }}页，一共{{ Page.pagecount }}页
                </el-pagination>
            </div>
        </td>
         <td>
            <div class="demo-pagination-block">
                <el-pagination
                v-model:current-page="Page.pageindex"
                v-model:page-size="Page.pagesize"
                :page-sizes="[2, 3, 5, 10]"
                :size="Page.pagesize"
                :disabled="disabled"
                :background="background"
                layout=" prev, pager, next,slot"
                :total="Page.totalcount"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                prev-text="上一页"
                next-text="下一页"
                >
                <el-button @click="handleCurrentChange(1)">首页</el-button>
                </el-pagination>
            </div>
        </td>
         <td>
            <div class="demo-pagination-block">
                <el-pagination
                v-model:current-page="Page.pageindex"
                v-model:page-size="Page.pagesize"
                :page-sizes="[2, 3, 5, 10]"
                :size="Page.pagesize"
                :disabled="disabled"
                :background="background"
                layout="jumper,slot"
                :total="Page.totalcount"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                >
                <el-button @click="handleCurrentChange(Page.pagecount)">尾页</el-button>
                </el-pagination>
            </div>
        </td>
    </tr>
 </table> -->
    </el-card>
  </div>

</template>

<script lang="ts" setup>
import axios from "axios";
import { ref, reactive, onMounted } from "vue";
import moment from "moment";
import { useRouter } from "vue-router";
import { ArrowRight } from '@element-plus/icons-vue'
import { ElMessage } from "element-plus";
import service from "@/utils/request";

const router = useRouter();
onMounted(() => {
  getdata();
});

const tableData = ref([]);
const getdata=()=>{
    service.get("/api/app/goods/goods-type-list")
    .then((res) => {
      if (res.data) {
        tableData.value = res.data;
      }
    })
}





</script>

<style scoped>
.goods-page-bg {
  background: linear-gradient(135deg, #e3f0ff 0%, #f8fbff 100%);
  min-height: 100vh;
  padding: 32px;
}
.welcome-card {
  margin-bottom: 24px;
  background: linear-gradient(90deg, #409eff 0%, #53c0ff 100%);
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(64, 158, 255, 0.08);
}
.welcome-title {
  font-size: 26px;
  font-weight: bold;
  display: flex;
  align-items: center;
}
.theme-icon {
  font-size: 32px;
  margin-right: 12px;
}
.form-card,
.table-card {
  margin-bottom: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.06);
}
.demo-form-inline .el-input {
  --el-input-width: 220px;
}
.demo-form-inline .el-select {
  --el-select-width: 220px;
}
.el-form-item__label {
  color: #409eff;
  font-weight: 500;
}
.el-table th {
  background: linear-gradient(90deg, #e3f0ff 0%, #b3e0ff 100%);
  color: #222;
  font-size: 15px;
}
.el-table {
  border-radius: 10px;
  overflow: hidden;
}
.el-button {
  border-radius: 20px;
  font-weight: 500;
  transition: box-shadow 0.2s;
}
.el-button:hover {
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.15);
}
.el-button--primary {
  background: linear-gradient(90deg, #409eff 0%, #53c0ff 100%);
  border: none;
}
.el-button--success {
  background: linear-gradient(90deg, #67c23a 0%, #95d475 100%);
  border: none;
}
.el-button--danger {
  background: linear-gradient(90deg, #f56c6c 0%, #f89898 100%);
  border: none;
}
.el-button--info {
  background: linear-gradient(90deg, #909399 0%, #b1b3b8 100%);
  border: none;
}
</style>
